<template>
  <view :style="styles">
    {{ title }}
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
const { title } = withDefaults(
  defineProps<{
    title?: string;
  }>(),
  {
    title: "默认标题",
  }
);
// 胶囊
const menuInfo = ref<{
  bottom: number;
  height: number;
  left: number;
  right: number;
  top: number;
  width: number;
}>();

onMounted(() => {
  menuInfo.value = uni.getMenuButtonBoundingClientRect();
});

const styles = computed(() => {
  if (!menuInfo.value) {
    return {};
  }
  return {
    width: "100%",
    height: menuInfo.value?.height + 'px',
    paddingTop: menuInfo.value?.top + 'px',
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };
});
</script>

<style lang="less">
</style>
